<template>
  <div class="header">
      <div class="header-left">
          <i class="iconfont">&#xe624;</i>
      </div>
      <div class="header-input">
          <i class="iconfont">&#xe632;</i>
          <span>输入城市/景点/游玩主题</span>
      </div>
      <router-link to='/city'>
        <div class="header-right">
            <span>{{this.city}}</span>
            <i class="iconfont">&#xe8f7;</i>
        </div>
      </router-link>
      
  </div>
</template>
<script>
import { mapState } from 'vuex'
export default {
  components:{},
  props:{
    
  },
  data(){
    return {
    }
  },
  watch:{},
  computed:{
    ...mapState(['city'])
  },
  methods:{},
  created(){},
  mounted(){
   
  }
}
</script>
<style lang="stylus" scoped>
@import '~styles/varibles.styl'
.header
 display:flex
 line-height:$headerHeight 
 background: $bgColor
 color: #fff
 .header-left
   line-height :$headerHeight
   padding-left: 0.2rem
 .header-input
   flex : 1
   margin-top:0.12rem
   margin-left :0.4rem
   height :0.62rem
   line-height:0.62rem 
   color: #ccc
   background :#fff
   border-radius :5px
   padding-left: 0.1rem
 .header-right
    min-width :1.04rem
    padding-left :0.1rem
    text-align: center
    color: #fff
    .iconfont
      font-size : 0.38rem
      margin-left :-0.05rem
</style>